<template>

	<view>
		<!-- 店面点餐 -->
		<view v-show="dianmian">
			<!-- 自定义导航栏 -->
			<view class="top">
				<view style="display: flex;align-items: center;justify-content: space-between">
					<image src="../../static/zw.png"></image>
					<span style="color: #FF6600;" @click="changeDesc">
						整单打包/备注
					</span>
				</view>
			</view>


			<view class="order-view">
				<view class="commodity">
					<!-- 一级菜单 -->
					<view class="order-left">
						<scroll-view scroll-y="true" class="scroll-Hei" :scroll-with-animation="true" :enhanced="true"
							:show-scrollbar="false">
							<block v-for="(item,index) in menuList" :key="index">
								<view class="itemize-text" :class="{active: index == trigger}"
									@click="itemIze(index,item,'one')">
									<text>{{item.title}}</text>
									<!-- <text v-if="item.sele_quantity > 0">{{item.sele_quantity}}</text> -->
								</view>
							</block>
						</scroll-view>
					</view>
					<!-- 二级菜单 -->
					<view class="order-left">
						<scroll-view scroll-y="true" class="scroll-Hei" :scroll-with-animation="true" :enhanced="true"
							:show-scrollbar="false">
							<block v-for="(item,index) in secondMenuList" :key="index">
								<view class="itemize-text" :class="{active: index == trigger2}"
									@click="itemIze(index,item,'two')">
									<text>{{item.title||item.name}}</text>
								</view>
							</block>
						</scroll-view>
					</view>
					<!-- 具体菜单 -->
					<view class="order-right">
						<!-- 没菜品的情况 -->
						<scroll-view v-if="childMenuList.length==0">
							<view style="height:80vh;display: flex;align-items: center;justify-content: center;">
								<view>
									<image src="/static/zwcp.png" mode="widthFix" style="width:260rpx;"></image>
									<span
										style="display: block;text-align: center;font-size: 40rpx;font-weight: 600;margin-top: 20rpx;color: gainsboro;">暂无菜品</span>
								</view>
							</view>

						</scroll-view>
						<scroll-view v-else scroll-y="true" class="scroll-Hei" :scroll-with-animation="true"
							:enhanced="true" :show-scrollbar="false" :scroll-into-view="scroll_into">
							<block v-for="(item,index) in childMenuList" :key="index">
								<view :id="item.id" class="rig-height" @click="open(item)">

									<view class="classif-goods">
										<view class="goods-image">
											<image :src="item.image" mode="aspectFill"></image>
										</view>

									</view>
									<view class="classif-right">
										<h5>{{item.name}}</h5>
										<h6>￥{{item.mr_price}}</h6>
										<span>{{item.name}}</span>
									</view>
								</view>
							</block>
							<view style="height: 800rpx;"></view>
						</scroll-view>

					</view>

				</view>



			</view>
			<!-- 规格选取 -->
			<uni-popup ref="popup" type="cneter" border-radius="10px 10px 0 0">
				<view class="popupDialog">
					<view ref="dialogContent" class="dialogContent">
						<view class="title"> 规格选取</view>
						<view class="parameterBox">
							<h3>规格：</h3>
							<view>
								<view
									@click="detailData.specs_price=item.size;detailData.price=item.price;$forceUpdate()"
									:class="detailData.specs_price==item.size?'viewOn':''"
									v-for="item in parameter.sale_price" :key="item.id">
									<span>{{item.size}}</span>
									<span>|</span>
									<span>{{item.price}} </span>
								</view>
							</view>
						</view>
						<!-- 团购才有 -->
						<view class="parameterBox2" v-if="parameter.is_setmeal==2">
							<h3>所含菜品</h3>
							<view>
								<view v-for="(item,index) in parameter.menu" :key="index">
									<span>{{index+1}}{{item.name}}</span>
								</view>
							</view>
						</view>


						<view v-for="child in parameter.specs" v-if="parameter.is_setmeal==1">
							<view class="parameterBox1">
								<h3>{{child.title}}：</h3>
								<view>
									<view @click="addNote(childs,child.price)"
										:class="notes.includes(childs) ? 'viewOn' : ''" v-for="childs in child.price"
										:key="childs">
										<span>{{childs}}</span>
									</view>
								</view>
							</view>
						</view>
						<view style="display: flex;position: absolute;bottom: 0">
							<button class="common_btn-white" @click="close()">取消</button>
							<button class="common_btn-defalut" type="primary" @click="submitData()">确定</button>
						</view>
					</view>
				</view>
			</uni-popup>
			<!-- 备注 -->
			<uni-popup ref="isShowDialog1" type="center" border-radius="10px 10px 0 0">
				<view class="descBox">
					<h3>备注：</h3>
					<view>
						<view @click="addDesc(item.desc)" :class="desc.indexOf(item.desc) !== -1?'viewOn':''"
							v-for="(item,index) in remarkList" :key="item.desc">
							<span>{{item.desc}}</span>
						</view>
					</view>
				</view>
				<view style="display: flex;position: absolute;bottom: 0;">
					<button class="common_btn-white" @click="$refs.isShowDialog1.close()"
						style="width: 300rpx;border-radius:0 0 0 50rpx ;">取消</button>
					<button @click="$refs.isShowDialog1.close()"
						style="width: 300rpx;background-color: #FF6600;color: white;	border-radius:0 0 50rpx 0;">确定</button>
				</view>
			</uni-popup>
			<!-- 订单弹窗 -->
			<uni-popup ref="popupOriderList" type="bottom" border-radius="10px 10px 0 0">
				<view class="popupDialogOrider">
					<view style="text-align: right;box-sizing: border-box;padding:0px 10px;">
						<uni-icons type="closeempty" @click="$refs.popupOriderList.close"></uni-icons>
					</view>
					<view
						style="display: flex;justify-content: space-between;align-items: center;padding: 20rpx 40rpx;background-color:rgb(242,242,242) ;box-sizing: border-box;font-size: 14rpx;">
						<span style="font-size: 12px;">已选商品</span>
						<span style="display: flex;align-items: center;font-size: 12px;" @click="shoppingCar=[]">
							<uni-icons type="trash"></uni-icons>
							清空购物车</span>
					</view>
					<view class="popupDialogOrider_content">
						<view v-for="(item,index) in shoppingCar" :key="index">
							<h5>{{item.name}} </h5>
							<span>￥{{item.price*item.num}} </span>
							<uni-number-box v-model="item.num" @blur="blur" @focus="focus"
								@change="changeValue(item,index)" />
						</view>

					</view>
				</view>
			</uni-popup>

			<!-- 提示信息弹窗 -->
			<uni-popup ref="message" type="message" style="height: 50rpx;">
				<uni-popup-message :type="msgType" :message="messageText" :duration="2000"
					style="height: 100rpx;line-height: 50rpx;"></uni-popup-message>
			</uni-popup>
			<view class="footer">
				<span>
					<uni-badge size="small" :text="cartNum" absolute="righttop" type="error" :offset="[0, 23]">
						<uni-icons type="cart" size="30" @click="openPopupOrider">
						</uni-icons>
					</uni-badge>
					<h6>￥{{total}}</h6>

				</span>

				<!-- <button class="common_btn-white" @click="close()">查看订单</button> -->
				<button style="color:#ffffff;backgroundColor:#FF8A18; ;borderColor:#FF6600" class="common_btn-defalut"
					type="primary" @click="submitOrder()">下单</button>

			</view>
		</view>
		<!-- 提示信息弹窗 -->
		<uni-popup ref="message" type="message" style="height: 50rpx;">
			<uni-popup-message :type="msgType" :message="messageText" :duration="2000"
				style="height: 100rpx;line-height: 50rpx;"></uni-popup-message>
		</uni-popup>
		<!--  外卖输入地址 -->
		<view v-show="!dianmian">
			<uni-section title="外卖信息" type="line">
				<view class="example">
					<!-- 基础用法，不包含校验规则 -->
					<uni-forms ref="baseForm" :modelValue="waimaiForm">
						<uni-forms-item label="姓名:" required>
							<uni-easyinput v-model="waimaiForm.name" placeholder="请输入姓名" />
						</uni-forms-item>
						<uni-forms-item label="电话:" required>
							<uni-easyinput v-model="waimaiForm.mobile" placeholder="请输入电话" />
						</uni-forms-item> 
						<uni-forms-item label="地址:" required>
							<uni-easyinput v-model="waimaiForm.address" placeholder="请输入地址" />
						</uni-forms-item>
					</uni-forms>
					<button @click="baochun()"
						style="border-radius: 40px;background-color: #FF6600;color: white;">保存并使用</button>
				</view>
			</uni-section>
		</view>
	</view>
</template>
<script>
	export default {

		data() {
			return {
				remarkList: [],
				waimaiForm: {

				},
				dianmian: true,
				messageText: '',
				msgType: '',
				cartCount: 0,
				options: [{
					icon: 'cart',
					text: '购物车',
					info: 2
				}],
				buttonGroup: [{
					text: '结账',
					backgroundColor: 'linear-gradient(90deg, #FFCD1E, #FF8A18)',
					color: '#fff'
				}],
				desc: '',
				notes: [],
				parameter: {},
				detailData: {
					specs_price: ''
				},
				num: 55,
				card: true,
				shopping_card: [],
				secondMenuList: [],
				menuList: [],
				scroll_into: '',
				childMenuList: [],
				packing_fee: 0,
				form: {},

				trigger: 0, //类目选中的值
				trigger2: 0,
				shoppingCar: [],
				seat_id: 'VmzQgophuH'
			}
		},
		computed: {
			total() {

				if (this.shoppingCar.length !== 0) {
					return (this.shoppingCar.reduce((total, item) => total + (item.price * item.num), 0) );
				} else {
					return 0
				}
			},
			cartNum() {
				return (this.shoppingCar.reduce((cartNum, item) => cartNum + (item.num), 0));
			}
		},
		onLoad(query) {
			// let params = this.$route.query;
			//  console.log(1111111,this.$route); // 打印所有地址栏参数
			//  console.log(params.seat_id); // 打印所有地址栏参数
			if (query.seat_id) {
				this.dianmian = true
			this.seat_id=query.seat_id
			} else {
				this.dianmian = false
			}

			this.queryTGList()
			this.queryList();

		},
		methods: {
			baochun(){
				if(!this.waimaiForm.mobile||!this.waimaiForm.address ||!this.waimaiForm.name ){
					if(!this.waimaiForm.name){
							this.messageToggle('warn', '请输入姓名')
					}
					else if(!this.waimaiForm.mobile){
							this.messageToggle('warn', '请输入手机号')
					}else if(!this.waimaiForm.address){
							this.messageToggle('warn', '请输入地址栏')
					}
				}else {
					this.dianmian=true
					
				}
			},
			// 选择备注
			addDesc(item) {
				console.log(item)
				const index = this.desc.indexOf(item);
				if (index === -1) {
					// 如果没有找到，添加到 notes 中
					this.desc.push(item);
				} else {
					// 如果已经存在，移除 notes 中的该项
					this.desc.splice(index, 1);
				}
				console.log(this.desc)
				this.$forceUpdate()
			},
			// 增加备注
			changeDesc() {
				uni.request({
					url: 'https://dd.jiankaobang.com/api/remarks/lists', // 你的API接口地址
					method: 'POST', // 请求方法，可选值：OPTIONS, GET, HEAD, POST, PUT, DELETE, TRACE, CONNECT
					header: {
						'Content-Type': 'application/json',
						'Authorization': 'Bearer your-token'
					},

					success: (res) => {
						this.desc = []
						this.remarkList = res.data.data
						this.$refs.isShowDialog1.open()
					},
					fail: (err) => {
						// 接口调用失败的回调函数
						console.error(err);
					},
					complete: () => {
						// 接口调用结束的回调函数（成功或失败都会执行）
					}
				});
			},
			// 下单
			submitOrder() {
				uni.request({
					url: 'https://dd.jiankaobang.com/api/order/create_order', // 你的API接口地址
					method: 'POST', // 请求方法，可选值：OPTIONS, GET, HEAD, POST, PUT, DELETE, TRACE, CONNECT
					header: {
						'Content-Type': 'application/json',
						'Authorization': 'Bearer your-token'
					},
					data: {
						seat_id: this.seat_id,
						packing_fee: this.packing_fee,
						desc: this.desc,
						order_detail: JSON.stringify(this.shoppingCar),
						...this.waimaiForm
						// 需要传递的参数

					},
					success: (res) => {
						this.shoppingCar=[]
						this.messageToggle('success', res.data.msg)
					},
					fail: (err) => {
						// 接口调用失败的回调函数
						console.error(err);
					},
					complete: () => {
						// 接口调用结束的回调函数（成功或失败都会执行）
					}
				});
			},

			changeValue(value, index) {
				console.log(value)
			},
			//提示信息
			messageToggle(type, text) {
				this.msgType = type
				this.messageText = text
				this.$refs.message.open()
			},
			// 查看订单
			openPopupOrider() {
				if (this.shoppingCar.length == 0) {
					this.messageToggle('warn', '请先选择菜品及数量')
					return
				}
				this.$refs.popupOriderList.open('bottom')
			},
			open(item) {
				console.log(item)
				this.detailData={}
				this.notes=[]
				this.parameter = JSON.parse(JSON.stringify(item))
				// 通过组件定义的ref调用uni-popup方法 ,如果传入参数 ，type 属性将失效 ，仅支持 ['top','left','bottom','right','center']
				this.$refs.popup.open('center')
			},
			submitData() {
				console.log(this.detailData)
				if ( Object.keys(this.detailData).length === 0) {
					this.messageToggle('warn', '请先选择规格！')
					return
				}
				let notes = this.notes.join('/')
				this.detailData = {
					price: this.detailData.price,
					specs_price: this.detailData.specs_price,
					notes: notes,
					name: this.parameter.name,
					num: 1,
					menu_id: this.parameter.id,
				}

				this.shoppingCar.push(this.detailData)
				this.$refs.popup.close()
			},
			close() {
				// TODO 做一些其他的事情，before-close 为true的情况下，手动执行 close 才会关闭对话框
				// ...
				this.$refs.popup.close()
			},
			// 右边菜品滚动时触发
			scroLl(event) {
				// console.log(event.detail.scrollTop)
				let scrollTop = event.detail.scrollTop
				if (scrollTop >= this.tophei) { //上拉
					// 当前分类商品的高度小于滚动高度时跳转下一个分类
					if (scrollTop >= this.heightset[this.trigger]) {
						this.trigger += 1
					}
				} else { //下拉
					// 当前分类商品的高度大于滚动高度时跳转下一个分类
					if (scrollTop < this.heightset[this.trigger - 1]) {
						this.trigger -= 1
					}
				}
				this.tophei = scrollTop
			},
			// 点击类目加上背景色
			itemIze(index, item, title) {
				let id = item.id
				console.log(id)
				if (id == 'tg001_01') {
					return
				}
				if (id == 'tg001' && title == 'one') { //团购套餐
					this.trigger = index
					this.queryTGList()
					this.trigger2 = 0
					this.secondMenuList = [{
						title: '全部套餐',
						id: 'tg001_01',
					}]
					console.log(this.menuTGList)
					this.childMenuList = this.menuTGList || []
					return
				}

				if (title == 'one') { // 一级菜单
					this.trigger = index
					this.trigger2 = 0
					this.scroll_into = id
					this.form.pid = id
					this.form.cid = this.menuList[index].child[0].id
					this.secondMenuList = this.menuList[index].child

				} else { // 二级菜单
					this.form.cid = id
					this.trigger2 = index
					this.scroll_into = id
				}
				this.queryMenuList()
				setTimeout(() => {
					this.scroll_into = ''
				}, 200)
			},
			addNote(child, list) {
				// 从 list 中找到 `this.notes` 中存在的项并删除
				list.forEach(item => {
					const itemIndex = this.notes.indexOf(item);
					if (itemIndex !== -1) {
						this.notes.splice(itemIndex, 1);
					}
				});

				// 处理单个 child 的添加和删除逻辑
				const childIndex = this.notes.indexOf(child);
				if (childIndex === -1) {
					// 如果没有找到，添加到 notes 中
					this.notes.push(child);
				} else {
					// 如果已经存在，移除 notes 中的该项
					this.notes.splice(childIndex, 1);
				}
			},
			// 获取团购套餐
			queryTGList() {
				uni.request({
					url: 'https://dd.jiankaobang.com/api/setmeal/lists', // 你的API接口地址
					method: 'POST', // 请求方法，可选值：OPTIONS, GET, HEAD, POST, PUT, DELETE, TRACE, CONNECT
					header: {
						'Content-Type': 'application/json',
						'Authorization': 'Bearer your-token'
					},

					success: (res) => {
						res.data.data.map(x => {
							x.sale_price = Object.entries(x.sale_price).map(([size, price]) => ({
								size,
								price
							}));
							x.specs = Object.entries(x.specs).map(([title, price]) => ({
								title,
								price
							}));
							x.specs.map(y => {
								y.price = y.price.split(',')

							})

							// const priceArray = valuesString.split(',');

						})
						this.menuTGList = res.data.data

					},
					fail: (err) => {
						// 接口调用失败的回调函数
						console.error(err);
					},
					complete: () => {
						// 接口调用结束的回调函数（成功或失败都会执行）
					}
				});
			},
			// 获取菜单
			queryList() {
				uni.request({
					url: 'https://dd.jiankaobang.com/api/menu/menu_cate', // 你的API接口地址
					method: 'POST', // 请求方法，可选值：OPTIONS, GET, HEAD, POST, PUT, DELETE, TRACE, CONNECT
					header: {
						'Content-Type': 'application/json',
						'Authorization': 'Bearer your-token'
					},
					data: {
						// 需要传递的参数
					},
					success: (res) => {
						console.log()

						this.menuList = res.data.data
						this.menuList.push({
							title: '团购套餐',
							id: 'tg001',
						})
						this.secondMenuList = this.menuList[0].child
						this.form.pid = this.menuList[0].id
						this.form.cid = this.menuList[0].child[0].id
						console.log(res.data);
						this.queryMenuList()
					},
					fail: (err) => {
						// 接口调用失败的回调函数
						console.error(err);
					},
					complete: () => {
						// 接口调用结束的回调函数（成功或失败都会执行）
					}
				});
			},
			// 获取具体菜单
			queryMenuList() {
				uni.request({
					url: 'https://dd.jiankaobang.com/api/menu/menu_list', // 你的API接口地址
					method: 'POST', // 请求方法，可选值：OPTIONS, GET, HEAD, POST, PUT, DELETE, TRACE, CONNECT
					header: {
						'Content-Type': 'application/json',
						'Authorization': 'Bearer your-token'
					},
					data: {
						pid: this.form.pid,
						cid: this.form.cid
						// 需要传递的参数

					},
					success: (res) => {

						res.data.data.menuList.map(x => {
							x.sale_price = Object.entries(x.sale_price).map(([size, price]) => ({
								size,
								price
							}));
							x.specs = Object.entries(x.specs).map(([title, price]) => ({
								title,
								price
							}));
							x.specs.map(y => {
								y.price = y.price.split(',')

							})

							// const priceArray = valuesString.split(',');

						})
						this.packing_fee = res.data.data.packing_fee
						this.childMenuList = res.data.data.menuList || []
						console.log(res.data);
					},
					fail: (err) => {
						// 接口调用失败的回调函数
						console.error(err);
					},
					complete: () => {
						// 接口调用结束的回调函数（成功或失败都会执行）
					}
				});
			}

		}
	}
</script>

<style scoped lang="scss">
	.content {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;

	}

	.top {
		height: 120rpx;
		border: 1px solid gainsboro;
		background-color: white;
		border-left: 0px;
		border-right: 0px;
		align-items: center;
		box-sizing: border-box;
		padding: 0 40rpx;
		line-height: 120rpx;
	}

	.top image {
		width: 40px;
		height: 40px;
	}

	.logo {
		height: 200rpx;
		width: 200rpx;
		margin-top: 200rpx;
		margin-left: auto;
		margin-right: auto;
		margin-bottom: 50rpx;
	}

	.text-area {
		display: flex;
		justify-content: center;
	}

	.title {
		font-size: 36rpx;
		color: #8f8f94;
	}

	search-view {
		background: linear-gradient(to right, #4aa3d2, #339bd1, #1d92d0, #1296db) !important;
		position: fixed;
		top: 0;
		right: 0;
		left: 0;
	}

	.search-input {
		background: #FFFFFF;
		border-radius: 10upx;
		display: flex;
		flex: 1;
		position: relative;
		margin-left: 20rpx;
	}

	.search-input input {
		width: 100%;
		font-size: 30upx;
		color: #b2b2b2;
		padding-left: 80upx;
	}

	.search-input image {
		width: 35upx;
		height: 35upx;
		position: absolute;
		left: 30upx;
		align-self: center;
	}


	/* 点餐界面 */
	/* .order-view{margin-top: 300rpx;} */
	.commodity {
		display: flex;
		position: fixed;
		/* top: 300rpx; */
		left: 0;
		right: 0;
	}

	.order-left {
		background-color: #fafafa;
		width: 150rpx;
		overflow-y: auto;
	}

	.itemize-text {
		font-size: 27rpx;
		padding: 30rpx 10rpx;
		display: flex;
		align-items: center;
		color: #797979;
	}

	.itemize-text text:nth-child(1) {
		flex: 1;
	}

	.itemize-text text:nth-child(2) {
		background-color: #eb5941;
		border-radius: 50%;
		font-size: 20rpx;
		color: #FFFFFF;
		width: 30rpx;
		height: 30rpx;
		display: flex;
		justify-content: center;
		align-items: center;
		margin-left: 2rpx;
	}

	/* 点击分类列表加上背景色 */
	.active {
		background-color: #FFFFFF;
		color: #000000 !important;
	}

	.scroll-Hei {
		height: 100vh;
		/* white-space: nowrap; */
	}

	.order-right {
		background-color: #FFFFFF;
		flex: 1;
		overflow-y: auto;

	}

	.classif {
		font-size: 27rpx;
		padding: 30rpx 20rpx;
		color: #797979;
	}

	/* 底部购物车 */

	.order-bottom {
		background-color: #fefefe;
		height: 120rpx;
		position: fixed;
		bottom: 0;
		left: 0;
		right: 0;
		box-shadow: 0rpx -1.9rpx 1rpx 1rpx #f9f9f9;
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding: 0 20rpx;
		z-index: 9;
	}

	.Shopping image {
		width: 75rpx;
		height: 75rpx;
		display: block;
	}

	.Shopping-left {
		width: 75rpx;
		height: 75rpx;
	}

	.Shopping {
		display: flex;
		align-items: center;
		/* height: 120rpx; */
	}

	.Shopping-number {
		align-self: flex-start;
		background: #eb5941;
		color: #ffff;
		width: 40rpx;
		border-radius: 50rpx;
		text-align: center;
		font-size: 20rpx;
		/* margin-top: 15rpx; */
	}

	.Shopping-title {
		flex: 1;
		padding: 0 25rpx;
		color: #999999;
		/* height: 120rpx;
		line-height: 120rpx; */
	}

	.place-order button {
		border: none;
		background: linear-gradient(to right, #4aa3d2, #339bd1, #1d92d0, #1296db);
		/* width: 200rpx; */
		height: 75rpx;
		line-height: 75rpx;
		border-radius: 30rpx;
		font-weight: bold;
		z-index: 9;
	}

	/* 阻止点击 */
	.prevent_style_bu {
		opacity: 0.4;

	}

	.goods-image>image {
		width: 240rpx;
		height: 90px;
		margin-right: 10rpx;
	}

	.rig-height {
		display: flex;
		width: 100%;
		height: 200rpx;
		margin: 20rpx;
		border-bottom: 1px solid #8f8f94;
		overflow: hidden;
	}

	.classif-right>h6 {
		color: red;
	}

	.popupDialog {
		width: 600rpx;
		display: block;
		border-radius: 40rpx;
		min-height: 600rpx;
		background-color: white;


		padding-top: 0rpx;


	}

	.parameterBox {
		padding: 40rpx;
		padding-bottom: 0;

		h3 {
			font-size: 32rpx;
			font-weight: 600;
			margin-bottom: 30rpx;
		}

		view {
			margin-bottom: 10rpx;
			height: 140rpx;
			display: flex;
			justify-content: flex-start;
			flex-wrap: wrap;
			line-height: 1;

			view {
				margin-right: 15rpx;
				font-size: 12px;
				text-align: center;
				border: 1px solid #2b2b2c;
				min-width: 80px;
				height: 50rpx;
				line-height: 50rpx;
				padding: 0 15rpx;
				border-radius: 40rpx;
				cursor: pointer;

				span:nth-child(2) {
					padding: 0 10rpx;
				}

			}

			.viewOn {
				border-color: #FF6600;
				;
				color: #FF6600;
			}
		}

	}

	.parameterBox2 {
		padding: 40rpx;
		padding-bottom: 0;

		h3 {
			font-size: 32rpx;
			font-weight: 600;
			margin-bottom: 30rpx;
		}

		view {
			margin-bottom: 10rpx;
			min-height: 140rpx;
			display: flex;
			justify-content: flex-start;
			flex-wrap: wrap;
			line-height: 1;

			view {
				margin-right: 15rpx;
				font-size: 12px;
				text-align: center;
				min-width: 80px;
				height: 50rpx;
				line-height: 50rpx;
				padding: 0 15rpx;
				border-radius: 40rpx;
				cursor: pointer;

				span:nth-child(2) {
					padding: 0 10rpx;
				}

			}

			.viewOn {
				border-color: #FF6600;
				;
				color: #FF6600;
			}
		}

	}


	.parameterBox1 {
		padding: 40rpx;
		padding-bottom: 20rpx;
	
		overflow: auto;

		h3 {
			font-size: 16px;
			font-weight: 600;
			margin-bottom: 30rpx;
		}

		view {
			display: flex;
			align-items: center;
			justify-content: flex-start;
			flex-wrap: wrap;
			height: 150rpx;
			line-height: 1;

			view {
				margin-right: 15px;
				font-size: 12px;
				border: 1px solid #2b2b2c;
				min-width: 80px;
				height: 25px;
				line-height: 25px;
				border-radius: 20px;
				cursor: pointer;
				text-align: center;
				display: flex;
				align-items: center;
				justify-content: center;
			}

			.viewOn {
				border-color: #FF6600;
				color: #FF6600;
			}
		}

	}

	.popupDialog uni-button {
		width:300rpx;
		border-radius: 0px;
		border: 0px;
	}

	.popupDialog .common_btn-white {
		background-color: white;
		border: 0px;

	}

	.popupDialog .common_btn-defalut {
		background-color: #FF6600;
	}

	uni-button:after {
		border: 0px;
	}

	.dialogContent{
		height: 100%;
		padding-bottom: 120rpx;
	}

	.dialogContent .title {
		height: 90rpx;
		line-height: 90rpx;
		background-color: #FF6600;
		text-align: center;
		color: white;
	}

	.footer {
		position: fixed;
		bottom: 0;
		width: 100%;
		height: 120rpx;
		line-height: 120rpx;
		background-color: white;
		border-top: 1px solid gainsboro;
		box-sizing: border-box;
		padding-left: 40rpx;
		display: flex;
		justify-content: flex-start;
		text-align: center;
		padding-left: 0;

		span {
			width: 50%;
			color: #000000;
			font-weight: 600;
			font-size: 36rpx;
			display: flex;
			align-items: center;
			justify-content: center;

			h6 {
				font-size: 48rpx;
				margin-left: 40rpx;
				color: #FF6600;

			}
		}

		uni-button {
			width: 50%;
			border-radius: 0px;
			line-height: 120rpx;
			border: 0px;
		}

	}

	.popupDialogOrider {
		width: 100%;
		min-height: 200rpx;
		max-height: 1000rpx;
		background: white;
		box-sizing: border-box;
		padding-bottom: 20rpx;


		.popupDialogOrider_content {
			margin-top: 20rpx;
			min-height: 120rpx;
			width: 100%;
			max-height: 820rpx;
			box-sizing: border-box;
			padding:20rpx 40rpx ;
			overflow-y: auto;

			view {
				display: flex;
				justify-content: space-between;
				align-items: center;
				height: 80rpx;

				span {
					color: red;
				}
			}
		}
	}

	.example {
		box-sizing: border-box;
		padding: 40rpx;
	}

	.descBox {
		width: 600rpx;
		border-radius: 50rpx;
		box-sizing: border-box;
		padding: 40rpx;

		min-height: 400rpx;
		max-height: 800rpx;
		overflow: auto;
		background-color: white;

		h3 {
			text-align: center;
			margin-bottom: 15px;
		}

		view {
			display: flex;
			flex-wrap: wrap;

			view {
				margin-right: 15px;
				font-size: 12px;
				border: 1px solid #2b2b2c;
				min-width: 180rpx;
				margin-top: 20rpx;
				height: 25px;
				line-height: 25px;
				padding: 0 5px;
				border-radius: 20px;
				cursor: pointer;
				text-align: center;
				display: flex;
				align-items: center;
				justify-content: center;
			}

			.viewOn {
				border-color: #FF6600;
				;
				color: #FF6600;
			}
		}

	}
</style>